<template>
  <div class="sure-con">
   <div class="w-100 h-100 d-flex ai-center jc-center">
      <div class="sure">
      <CommonCard>
        <div class="close" @click="close"></div>
        <div class="d-flex flex-column w-100 h-100 py-10">
          <div class="flex-1 d-flex flex-column ai-center">
            <div class="l1" v-if="l1" :style="{backgroundImage:`url(${l1} )`}"></div>
            <div class="l2 mt-10" v-if="l2" :style="{backgroundImage:`url(${l2} )`}"></div>
            <div class="l3 my-10" v-if="l3" :style="{backgroundImage:`url(${l3} )`}"></div>
            <div class="my-10" v-if="!l3"></div>
          </div>
          <div class="d-flex jc-center mt-10">
            <div class="l4" @click="begin"></div>
          </div>
        </div>
      </CommonCard>
    </div>
   </div>
  </div>
</template>

<script>
import CommonCard from "@/components/CommonCard.vue";
export default {
  name: "Sure",
  props: ["l1", "l2", "l3"],
  components: {
    CommonCard
  },
  methods: {
    close() {
      this.$emit("close");
    },
    begin() {
      this.$emit("begin");
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.sure-con {
  z-index: 998;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.sure {
  padding: 1.5rem;
  width: 100%;
  .close {
    right: 0.3rem;
    top: 0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    z-index: 999;
    position: absolute;
    background-image: url(../../../assets/images/ft/close.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .l1 {
    width: 2.7rem;
    height: 2rem;
    //   background-image: url(../../../assets/images/ft/l1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l2 {
    width: 4.1rem;
    height: 2.9rem;
    //   background-image: url(../../../assets/images/ft/l2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l3 {
    width: 3.8rem;
    height: 0.7rem;
    //   background-image: url(../../../assets/images/ft/l3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .l4 {
    width: 5.1rem;
    height: 1.5rem;
    background-image: url(../../../assets/images/ft/l4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>